<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
		<title>city-select</title>
        <link rel="stylesheet" href="../css/cityStyle.css" />
        <link href="../css/common/mui.min.css" rel="stylesheet">
        <link href="../css/common/reset.css" rel="stylesheet">
        <link href="../css/common/common.css" rel="stylesheet">

        <link href="../css/select-modal.css" rel="stylesheet">
        
        <script src="../js/zepto-1.1.4.min.js"></script>
	</head>
	<body>

        <button class="btn">选择区域</button>

        <p>选择的区域: </p>
        <p class="value-content"></p>

        <main class="mainCityDark" style="display: none">
			<div class="mainCity">
				<header>
					<div class="leftNav">
						<b class="tip">请选择大区</b>
						<i class="selectTab" style="display: none">
							<span class="act"></span>
                            <span></span>
							<span></span>
							<span></span>                            
						</i>
						<em class="sure">确认</em>
					</div>
				</header>
				<section>
					<ul class="isCheckBox">
                        <!-- <li class="act">
                            <i></i>
                            <span>华东区</span>
                            <i class="right-icon-box"></i>
                        </li>
						<li >
                            <i></i>
                            <span>华南区</span>
                            <i class="right-icon-box"></i>
                        </li>
						<li >
                            <i></i>
                            <span>华北区</span>
                            <i class="right-icon-box"></i>
                        </li>
						<li >
                            <i></i>
                            <span>华西区</span>
                            <i class="right-icon-box"></i>
                        </li>                        -->
                    </ul>
                    <ul class="isCheckBox" style="display: none">
                        <li class="act">
                            <i></i>
                            <span>上海</span>
                            <i class="right-icon-box"></i>
                        </li>
                        <li >
                            <i></i>
                            <span>北京</span>
                            <i class="right-icon-box"></i>
                        </li>
                        <li >
                            <i></i>
                            <span>南京</span>
                            <i class="right-icon-box"></i>
                        </li>
                        <li >
                            <i></i>
                            <span>深圳</span>
                            <i class="right-icon-box"></i>
                        </li>                       
                    </ul>
                    <ul class="isCheckBox" style="display: none">
                        <li class="act">
                            <i></i>
                            <span>长宁区</span>
                            <i class="right-icon-box"></i>
                        </li>
                        <li >
                            <i></i>
                            <span>普陀区</span>
                            <i class="right-icon-box"></i>
                        </li>
                        <li >
                            <i></i>
                            <span>黄埔区</span>
                            <i class="right-icon-box"></i>
                        </li>
                        <li >
                            <i></i>
                            <span>静安区</span>
                            <i class="right-icon-box"></i>
                        </li>                       
                    </ul>
                    <ul class="isCheckBox" style="display: none">
                        <li class="act">
                            <i></i>
                            <span>黄埔一店</span>
                            <i class="right-icon-box"></i>
                        </li>
                        <li >
                            <i></i>
                            <span>黄埔二店</span>
                            <i class="right-icon-box"></i>
                        </li>
                        <li >
                            <i></i>
                            <span>黄埔三店</span>
                            <i class="right-icon-box"></i>
                        </li>
                        <li >
                            <i></i>
                            <span>黄埔四店</span>
                            <i class="right-icon-box"></i>
                        </li>                       
                    </ul>
				</section>
			</div>
		</main>
   

		<script type="module">

            var level_1_data = [
                {code: '0001', name: '华东区', type: 1},
                {code: '0002', name: '华南区', type: 1},
                {code: '0003', name: '华北区', type: 1},
                {code: '0004', name: '华西区', type: 1},               
            ]
            var level_2_data = [
                {code: '0001', name: '上海', type: 1},
                {code: '0002', name: '北京', type: 1},
                {code: '0003', name: '深圳', type: 1},
                {code: '0004', name: '南京', type: 1},  
            ]
            var level_3_data = [
                {code: '0001', name: '长宁区', type: 1},
                {code: '0002', name: '黄埔区', type: 1},
                {code: '0003', name: '静安区', type: 1},
                {code: '0004', name: '普陀区', type: 1}, 
            ]
            var level_4_data = [
                {code: '0001', name: '黄埔1店', type: 1},
                {code: '0002', name: '黄埔2店', type: 1},
                {code: '0003', name: '黄埔3店', type: 1},
                {code: '0004', name: '黄埔4店', type: 1}, 
            ]

            let select_data = []

            let tabIndex = 0

            // 展示第一级数据
            // for(let i = 0, len = level_1_data.length; i < len; i++) {

            //     let info = JSON.stringify(level_1_data[i])

            //     let liDom = `
            //         <li info=${info}>
            //             <i></i>
            //             <span>华东区</span>
            //             <i class="right-icon-box" info=${info}></i>
            //         </li>
            //     `
            //     $('.isCheckBox').append(liDom)
            // }
            createDom(level_1_data)

            function createDom(data) {
                for(let i = 0, len = data.length; i < len; i++) {

                    let info = JSON.stringify(data[i])

                    let liDom = `
                        <li info=${info} class="selItem">
                            <i></i>
                            <span>${data[i].name}</span>
                            <i class="right-icon-box" info=${info}></i>
                        </li>
                    `
                    $('.isCheckBox').append(liDom)
                }
                
                let liDom = document.getElementsByClassName('selItem')
                let rightIconDom = document.getElementsByClassName('right-icon-box')
                for(let i = 0; i < liDom.length; i ++) {
                    liDom[i].addEventListener('click', liItemClick)

                    rightIconDom[i].addEventListener('click', rightIconClick)
                }
            }
            
            
            // 呼出选择区域弹窗
			$('.btn').click(function() {
                let bgDiv = document.createElement("div");
                bgDiv.className = 'mask-black-bg'
                document.body.appendChild(bgDiv)
                $('.mainCityDark').show()
            })
            // 点击确定
            $('.sure').click(function() {
                $('.mainCityDark').hide()
                let bgDiv = document.getElementsByClassName('mask-black-bg')[0]
                document.body.removeChild(bgDiv)
            })

            // let bgModal = document.getElementsByClassName('.mask-black-bg')[0]

            // bgModal.addEventListener('click', function() {
            //     $('.modal-container').hide()
            //     this.style.display = 'none'
            // })

            // 点击整行选中或取消
            $('.isCheckBox li').click(function() {
                let isActive = $(this).hasClass('act')
                let item = JSON.parse($(this).attr('info'))

                console.log(item)

                $(this).hasClass('act') ? $(this).removeClass('act') : $(this).addClass('act')
                if(isActive) {
                    for(let i = 0; i < select_data.length; i ++) {
                        if(item.code === select_data[i].code) {
                            select_data.splice(i, 1)
                        }
                    }
                }else {
                    select_data.push(item)
                }

                console.log(select_data)
            })

            var liItemClick = function() {
                let isActive = $(this).hasClass('act')
                let item = JSON.parse($(this).attr('info'))

                console.log(item)

                $(this).hasClass('act') ? $(this).removeClass('act') : $(this).addClass('act')
                if(isActive) {
                    for(let i = 0; i < select_data.length; i ++) {
                        if(item.code === select_data[i].code) {
                            select_data.splice(i, 1)
                        }
                    }
                }else {
                    select_data.push(item)
                }

                console.log(select_data)
            }

            var rightIconClick = function() {
                
                if(select_data.length > 1) return
                select_data = []

                $('.mainCityDark .tip').hide()

                let item = JSON.parse($(this).attr('info'))

                $('.selectTab').show()
                console.log(tabIndex)
                $(".selectTab").children("span").get(tabIndex).innerText = item.name
                let tabInfo = JSON.stringify(item)
                $(".selectTab").children("span").get(tabIndex).setAttribute('info', tabInfo)

                $('.isCheckBox').remove()

                let isCheckBoxDom = document.createElement('div')

                isCheckBoxDom.className = 'isCheckBox'

                document.getElementsByTagName('section')[0].appendChild(isCheckBoxDom)

                let data = `level_${tabIndex + 1}_data`

                console.log(data)
                console.log(window[data])

                createDom(window[data])

                tabIndex++
                
            }

            // 点击向右箭头到下一级( 如果选中多个则无反应 )
            $('.isCheckBox .right-icon-box').click(function() {

                if(select_data.length > 1) return
                select_data = []

                $('.mainCityDark .tip').hide()

                let item = JSON.parse($(this).attr('info'))

                $('.selectTab').show()
                console.log(tabIndex)
                $(".selectTab").children("span").get(tabIndex).innerText = item.name
                let tabInfo = JSON.stringify(item)
                $(".selectTab").children("span").get(tabIndex).setAttribute('info', tabInfo)


                $('.isCheckBox').remove()

                let isCheckBoxDom = document.createElement('div')

                isCheckBoxDom.className = 'isCheckBox'

                document.getElementsByTagName('section')[0].appendChild(isCheckBoxDom)

                createDom(level_2_data)
                // let data = `level_${tabIndex + 1}_data`

                // createDom(data)

                tabIndex++                

            })

            // tab点击
            let tabSpan = document.querySelectorAll('.selectTab span')
            // console.log(tabSpan)
            for(let i = 0; i < tabSpan.length; i++) {
                tabSpan[i].onclick = function() {
                    select_data = []

                    $('.isCheckBox').remove()
                    let isCheckBoxDom = document.createElement('div')
                    isCheckBoxDom.className = 'isCheckBox'
                    document.getElementsByTagName('section')[0].appendChild(isCheckBoxDom)
                    createDom(level_1_data)
                }
            }

        </script>
        
		<!-- <script type="text/javascript" src="citySelect.js"></script> -->
		
	</body>
</html>
